<script setup lang="ts">
import BiliHistoryIcon from '@/components/icons/BiliHistoryIcon.vue';
import IronBoxIcon from '@/components/icons/IronBoxIcon.vue';
import { watchImmediate } from '@vueuse/core';
import { ref } from 'vue';
import { useRoute } from 'vue-router';

const active = ref(0);
const router = useRoute();

watchImmediate(() => router.path, (path) => {
  if (path.startsWith('/passbox')) active.value = 0;
  if (path.startsWith('/bilihistory')) active.value = 1;
})

</script>

<template>
  <div class="home">
    <div class="content">
      <RouterView />
    </div>

    <van-tabbar v-model="active">
      <van-tabbar-item to="/passbox">
        <span>钢铁匣</span>
        <template #icon="props">
          <IronBoxIcon :active="props.active" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/bilihistory">
        <span>哔哩历史</span>
        <template #icon="props">
          <BiliHistoryIcon :active="props.active" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style>
.home {
  height: 100dvh;
  display: flex;
  flex-direction: column;

}

.content {
  flex: 1;
  overflow: hidden;
}
</style>
